import BreadCrumb from '@/components/BreadCrumb';
import { ftInfo, ftUpdate } from '@/service/modules/setting';
import { Button, Card, Form, Input, message } from 'antd';
import React, { memo, useEffect } from 'react';

type FormValues = {
  focusContent: string;
  aboutContent: string;
};
const setting: React.FC = (props) => {
  const [form] = Form.useForm<FormValues>();

  // 保存
  function onSave() {
    form.validateFields().then((values) => {
      ftUpdate(values).then((res) => { 
        if (res.code === 200) {
          message.success('保存成功');
        } else {
          message.error('保存失败');
        }
      });
    });
  }


  useEffect(() => {
    ftInfo().then((res) => { 
      const { code, data,message } = res
      if(code === 200){
        console.log(data);
        const { focusContent, aboutContent } = data
        
        form.setFieldsValue({
          focusContent,
          aboutContent
        })
      }
    });
  }, []);

  return (
    <>
      <BreadCrumb />
      <br />
      <Card title={'配置信息'} variant="borderless" style={{ margin: '20px 0' }}>
        <Form form={form} name="demo_form" layout="horizontal" labelCol={{ span: 3 }}>
          <Form.Item label="聚焦文章ID" name="focusContent">
            <Input.TextArea placeholder="请输入ID，多个ID用请用分号隔开~" />
          </Form.Item>

          <Form.Item label="关于文章ID" name="aboutContent">
            <Input placeholder="请输入ID" style={{ width: 360 }} />
          </Form.Item>
        </Form>
      </Card>
      <div className="btn-btm">
        <Button type="primary" onClick={onSave}>
          保存
        </Button>
      </div>
    </>
  );
};

export default memo(setting);
